<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:x="http://java.sun.com/jsf/composite/movie">

    <ui:composition  template="/template.xhtml">

        <ui:define name="content">
            <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>

            <h:form>
                <div>
                    <h:outputLabel value="Movie Title: " for="movieTitle" style="font-weight: bold;"/>
                    <h:inputText id="movieTitle" value="#{searchController.movieTitle}" title="Movie Title" />
                    <h:commandButton action="#{searchController.performSearch}" value="Search" styleClass="button gray small">
                        <f:ajax execute="@form"
                                render="ajaxSearchDiv"
                                onevent="showWorkingIndicator"/>
                    </h:commandButton>
                </div>
                <div style="float: left; margin-left: 300px; margin-top: -20px;">
                    <span id="workingIndicator"
                          style="display: none;">
                        <img src="#{resource['images:ajax-loader.gif']}" alt="searching..."/>
                        searching ...
                    </span>
                </div>
                <p>
                    <br/>
                    <h:panelGroup id="ajaxSearchDiv" >
                        <h:outputText rendered="#{searchController.movieTitle!=null and (searchController.items==null || searchController.items.rowCount == 0) }" value="nothing found"/>
                        <x:movieTable controller="#{searchController}" />
                    </h:panelGroup>
                </p>
            </h:form>
        </ui:define>
    </ui:composition>
</html>